<template>
  <div id="modify">
    <div class="input-block">
      <div class="item">
        <i class="mobile"></i>
        <input type="number" v-model="mobile" placeholder="手机号" maxlength="11" />
        <span class="get-code" v-if="!showCountDown" @click="getCode">获取验证码</span>
        <span v-else class="count-down">{{countDown}}s后重新获取</span>
      </div>
      <div class="item">
        <i class="code"></i>
        <input type="number" v-model="code" placeholder="手机验证码" maxlength="6" />
      </div>
      <div class="item">
        <i class="lock"></i>
        <input type="password" v-model="password" placeholder="6-20位密码" />
      </div>
      <div class="item">
        <i class="lock"></i>
        <input type="password" v-model="newpassword" placeholder="再次确认密码" />
      </div>
    </div>
    <div class="button-block">
      <button @click="modifyPassword">确认</button>
    </div>
  </div>
</template>

<script>
import { Toast, Dialog,  } from "mand-mobile";
import https from "@/https";
import config from "@/config";
export default {
  components: {
    [Dialog.name]: Dialog,
  },
  name: "modify",
  data() {
    return {
      showCountDown: false, //是否显示倒计时
      countDown: 59, //倒计时
      code: "", //验证码值
      mobile: "", //手机号码
      password: "", //密码
      newpassword: "", // 再次确认密码
    };
  },
  methods: {
    // 获取验证码
    getCode() {
      let mobile = this.mobile;
      if (mobile == "") {
        Toast.failed("请先输入手机号");
        return;
      }
      this.showCountDown = true;
      let timer = setInterval(() => {
        this.countDown--;
        if (this.countDown <= 0) {
          clearInterval(timer);
          this.countDown = 59;
          this.showCountDown = false;
        }
      }, 1000);
      let params = {
        mobile
      };
      https
        .fetchPost(config.getCode, params)
        .then(res => {
          if (res.data.code == 1) {
            Toast.succeed("已发送验证码", 2000);
          } else {
            Toast.failed(res.data.msg, 2000);
            setTimeout(()=>{
              this.showCountDown = false;
              clearInterval(timer);
            },1500)
            return;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 验证验证码
    checkedCode(callBack) {
      let mobile = this.mobile;
      let code = this.code;
      let params = {
        mobile,
        code
      };
      https
        .fetchPost(config.checkCode, params)
        .then(res => {
          if (res.data.code == 1) {
            callBack();
          } else {
            Toast.failed(res.data.msg, 2000);
            return;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 注册
    modifyPassword() {
      let _this = this;
      let mobile = this.mobile;
      let code = this.code;
      let password = this.password;
      let newpassword = this.newpassword;
      const verify = /^1[345789]\d{9}$/; //电话号正则
      mobile = mobile.replace(/\s+/g, "");
      if (!verify.test(mobile) && mobile.length != 11) {
        Toast.info("请输入正确手机号", 2000);
        return;
      }
      if (code.length != 6) {
        Toast.info("请输入正确验证码", 2000);
        return;
      }
      if (password == "") {
        Toast.info("请输入密码", 2000);
        return;
      }
      if (password.length < 6 || password.length > 20) {
        Toast.info("密码长度不符合要求", 2000);
        return;
      }
      if (newpassword == "") {
        Toast.info("请输入确认秘密", 2000);
        return;
      }
      if (password != newpassword) {
        Toast.info("两次密码不一致", 2000);
        return;
      }
      
      let callBack = function(res) {
        let params = {
          mobile,
          password,
          newpassword,
        };
        https
          .fetchPost(config.modifyPassword, params)
          .then(res => {
            if (res.data.code == 1) {
                Toast.succeed('密码修改成功',2000);
                _this.$store.state.userInfo.acronym_password = password.substr(0,1);
                _this.mobile = ""; 
                _this.code = ""; 
                _this.password = ""; 
                _this.newpassword = ""; 
                setTimeout(()=>{
                  _this.$router.back(-1)
                },2000)
            } else {
                Toast.failed(res.data.msg);
            }
          })
          .catch(err => {
            console.log(err);
          });
      };
      this.checkedCode(callBack);
    },
  },
  created() {
  }
};
</script>

<style  lang="scss" scoped>
$themeColor: #444444;
$themeGold: #d7b987;
#modify {
    padding-top: 60px;
  .input-block {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background: #fff;
    // box-shadow: 0 0 1px 1px #ddd;
    width: 670px;
    padding: 40px 40px 50px;
    border-radius: 20px;
    .item {
      position: relative;
      display: flex;
      align-items: center;
      height: 90px;
      border-bottom: 1px solid #eee;
      i {
        width: 80px;
        height: 80px;
        margin-right: 20px;
        &.name {
          background: url("")
            no-repeat center center;
          background-size: 50%;
        }
        &.mobile {
          background: url("")
            no-repeat center center;
          background-size: 60%;
        }
        &.code {
          background: url("")
            no-repeat center center;
          background-size: 50%;
        }
        &.lock {
          background: url("")
            no-repeat center center;
          background-size: 50%;
        }
      }
      input {
        height: 70px;
        border: none;
        width: 500px;
        outline: none;
        color: #333;
        font-size: 26px;
      }
      input::-webkit-input-placeholder {
        color: #999;
      }
      input::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: #999;
      }
      input:-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: #999;
      }
      input:-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        color: #999;
      }
      .get-code {
        position: absolute;
        top: 15px;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 60px;
        width: 180px;
        font-size: 26px;
        background: #2f86f6;
        color: #fff;
        border-radius: 40px;
      }
      .count-down {
        position: absolute;
        top: 15px;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 60px;
        width: 180px;
        font-size: 26px;
        color: #999;
      }
    }
  }
  .button-block {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 40px;
    button {
      border: none;
      width: 600px;
      height: 90px;
      // background: #555;
      background: #2f86f6;
      color: #fff;
      font-size: 32px;
      border-radius: 40px;
      outline: none;
    }
  }
}
</style>
